import React from 'react'
import BasicThead from "../BasicThead/BasicThead"
import {WingBlank} from "antd-mobile"
import '../tables.css'
import _ from 'lodash'
const IndexTable = props => {
    const {
        tHead,
        data,
    } = props

    const tbody = data.map((dataArr, index) => {

        return (
            <tr key={index}>
                {dataArr.map(((data, index) => {

                    const colorStyle = (n1, n2) => {
                        if (n1 === n2) {
                            return
                        }
                        return {
                            color: n1 > n2 ? '#FA7268' : '#009904',
                        }
                    }

                    // if (index > 3) {
                    //
                    //     return <td
                    //         style={colorStyle(data, dataArr[index - 3])}
                    //         key={index}
                    //     >
                    //         {parseFloat(data)}
                    //     </td>
                    //
                    // }
                    if (_.isObject(data)) {
                        return <td
                            style={index > 3 ? colorStyle(data.from, dataArr[index - 3].from) : {}}
                            key={index}
                        >{data.to}</td>
                    }

                    return <td
                        style={index > 3 ? colorStyle(data, dataArr[index - 3]) : {}}
                        key={index}
                    >{data}</td>
                }))}
            </tr>
        )
    })


    const table = (
        <table className='basic-table'>
            <BasicThead tHead={tHead}/>
            <tbody>
            {tbody}
            </tbody>
        </table>
    )

    return (
        <>
            {table}
        </>
    )
}

export default IndexTable
